<template>
	<div class="exchange">
		<van-nav-bar class="title" title="充值" left-arrow @click-left="onClickLeft" />

		<h1>充值金额</h1>
		<van-field v-model="number" center clearable placeholder="输入1～100的整数" label="¥">
			<van-button slot="button" size="small" type="primary" class="send">当前余额 ¥0.00</van-button>
		</van-field>
		<div class="tab">
			<ul>

				<li v-for="(list,index) in Options" class="seach-all" :class="{seachchange:changeblue==index}" @click="changeColor(index,list)">
					<div>
						<span>{{list.text}}</span>
						<span class="sell" v-if="list.sell">送5元</span>
					</div>
				</li>


			</ul>
		</div>
		<div class="confirm">
			<van-button round block type="info" native-type="submit" @click="pay">
				去支付
			</van-button>
		</div>

	</div>
</template>
<script>
	export default {
		name: 'exchange',
		data() {
			return {
				number: '',
				Options: [{
					text: "5元",
					sell: false
				}, {
					text: "10元",
					sell: false
				}, {
					text: "15元",
					sell: false
				}, {
					text: "20元",
					sell: false
				}, {
					text: "25元",
					sell: true
				}, {
					text: "35元",
					sell: true
				}],
				changeblue: "1"
			};
		},
		mount() {

		},
		methods: {
			pay() {
				//console.log('submit', values);
			},
			onClickLeft() {

			},

			changeColor(index) {
				this.changeblue = index;
			}

		}
	};
</script>

<style lang="less" scoped>
	.exchange {
		.van-button--round {
			border-radius: 4px !important;
		}

		/deep/ .van-field__label {
			font-size: 36px !important;
		}

		/deep/ .van-button--normal {
			font-size: 18px;
		}

		/deep/ .van-nav-bar__title {
			font-weight: bold !important;
			font-size: 19px !important;
		}

		/deep/ .van-field__label {
			width: 40px !important;
		}

		.van-cell::after {
			border-bottom: 1px dotted #979797;
		}

		.van-button--info {
			background: #257fe7;
			font-size: 18px;
		}

		.tab {
			ul {
				.sell {
					color: red;
				}

				text-align:center;
				margin-top: 10px;
				font-size: 12px;
			}

			.seach-all {
				display: inline-block;
				width: 1.9rem;
				height: 1rem;
				margin: 10px;
				border-radius: 7px;
				text-align: center;
				line-height: 1rem;
				font-size: 16px;
				color: #9B9B9B;
				border: 1px solid #9b9b9b;
			}



			.seachchange {
				background-color: #006cff;
				border: none;
				color: white;
			}

		}

		.confirm {
			margin-top: 38px;
			padding: 14px;
		}

		font-weight:bold !important;

		.top {
			margin-top: .3rem;
		}

		.rember {
			position: absolute;
			right: -20px;
			color: #EF5B19;
		}

		.send {
			background: none;
			border: none;
			color: #9b9b9b;
			font-size: 15px;
		}

		h1 {
			font-size: 17px;
			font-weight: bold;
			margin: 23px 0 12px 15px;
		}
	}
</style>
